<template>
    <div>
        <p>订单</p>
        <van-row >
          <van-col span="24" >
            <van-tabs v-model="active">
              <van-row style="margin-top: 2rem;">
                <van-tab title="订单进度">
                 
                  <van-steps :active="active1">
                    <van-step>顾客下单</van-step>
                    <van-step>商家接单</van-step>
                    <van-step>顾客付款</van-step>
                  </van-steps>
                  <van-row v-if="payisshow">
                    <van-col span="6" offset="18">
                      <van-button  round type="info" @click="pay()">支付</van-button>
                    </van-col>
                  </van-row>
                </van-tab>
              </van-row> 
           
              <van-tab title="进行中">
                <van-row v-if="!isshow">
                  <van-empty  description="当前没有订单" />
                </van-row>
                <van-row v-if=" isshow">
                  <van-sticky :offset-top="10">
                    <van-col span="6" offset="18">
                      <van-button v-if=" isshow" round type="info" @click="addOrder1()">通知商家</van-button>
                    </van-col>
                  </van-sticky>
                  <van-col span="24">
                  
                    
                          <van-cell 
                        v-for="(item,index) in foodOrder" :key="index"
                          >
                          <van-row>
                            <van-col span="8">
                              <van-image
                                round
                                width="4rem"
                                height="4rem"
                                :src="item.image"
                              />
                              
                            </van-col>
                            <van-col span="8">
                              <van-cell :title="item.name"  />
                            </van-col>
                            <van-col span="8">
                              <van-cell :value="'$'+item.price"  />
                            </van-col>
                          </van-row>
                        
                              
              
                        </van-cell>
                    
                   
                    
                  </van-col>
           
                </van-row>
                <van-row>
     
              
                    <!-- <van-col span="12" offset="12">
                      <van-button v-if=" isshow" round type="info" @click="addOrder1()">通知商家</van-button>
                    </van-col> -->
      
                </van-row>
              </van-tab>

              <van-tab title="已完成">
                  <van-row class="list" v-show="empty">
                    <van-col span="24" >
                        <van-empty description="支付账单为空" />
                    </van-col>
                  </van-row>

                  <van-row class="list">
                    <van-col span="24" >
                        <van-cell 
                        v-for="(item,index) in fished" :key="index"
                        :title="item.username" :value="item.money+'元'" size="large" :label="item.createdate" >

                        </van-cell>
                    </van-col>
                  </van-row>

              </van-tab>
              <!-- <van-tab title="">内容 4</van-tab> -->
            </van-tabs>
          </van-col>
        </van-row>
        <Footer></Footer>
    </div>
   
</template>

<script>
  import { Toast } from 'vant';
  import { Empty } from 'vant';
  import {addOrder,addOrderState,getUserMoney,
    subtractMoney,updateState,getState,getAllFinsh} from '@/api/index'
import Footer from '../../components/Footer.vue'

  export default {
       components: { Footer },
       data() {
          return {
 
            active: 1,//页面切换
            active1: 0,//订单状态
            foodOrder:{},
            isshow:false,//控制按钮显示
            empty:false,
            fished:{},//完成的订单
            userstate:'',//用户状态
            payisshow:false,//支付按钮显示
            state:"",//订单状态
          };
      },
      methods:{
        //提交订单
        addOrder1(){
          Toast("已下单")
          this.active=0   //切换页面
          //设置pay支付按钮显示问题
          this.state="商家接单"
          if(this.state=="商家接单")
            this.payisshow=true
          else 
            this.payisshow=false

          
        
          this.isshow=!this.isshow
          this.getState1()

          updateState(localStorage.getItem("username")).then(res=>{
     
              //如果是true的话状态一定是商家接单
              if(res.data.data){
                this.active1=1
                localStorage.setItem("active1","1")
              }
       
      
              
          })  
          // 如果出问题是这里
          this.foodOrder={}
        },

        //点击支付弹窗付款
         pay(){
          // 隐藏
          localStorage.setItem("active1","2")
          let leftover=0 //余额
          let sum1=0  //总价
          let user1=localStorage.getItem("username")
          let yu={}
          this.foodOrder=JSON.parse( localStorage.getItem("foodOrder"))

          this.foodOrder.forEach(item => {
            sum1=sum1+item.price
          });

          //付款
           getUserMoney(user1).then(res=>{
   
            leftover=res.data.data
            yu["username"]=user1
            yu["submoney"]=sum1

            if(leftover-sum1>=0){
              //付款
              subtractMoney(yu).then(res=>{
                this.getState1()
              })
              //更改用户状态
              updateState(user1).then(res=>{
        
              })
              Toast("付款成功")
            }
            else 
              Toast("余额不足,请充值")
            })
          //切换到已支付页面
            this.$router.push("/homepage")
            

        },
        //获得状态
        getState1(){
          //获得订单状态
          getState(localStorage.getItem("username")).then(res=>{
            let st=res.data.data 
            this.state=st
            if(st==="顾客下单") 
                this.active1=0
            else if(st==="商家接单")
                this.active1=1
            else if(st=="顾客付款")
                this.active1=2
            else 
              this.active1=0
          })
        },
        //得到已完成的用户账单
        getFinshOrder(){

          getAllFinsh(localStorage.getItem("username")).then(res=>{

            this.fished=res.data.data

            console.log();
            //设置空页面
            if(this.fished.length===0)
                     this.empty=true
          })
        }
      },
      mounted(){
    

        if (this.$route.query.allData) {
          let formObj = decodeURIComponent(this.$route.query.allData)
          this.foodOrder = JSON.parse(formObj)
          // console.log("存之前",this.foodOrder);
          
          localStorage.setItem("foodOrder",JSON.stringify(this.foodOrder))
          // console.log("存之后",JSON.parse(localStorage.getItem("foodOrder")));
          if(this.foodOrder.length>0)
            this.isshow=!this.isshow
        }
        this.getState1() //获得状态
        this.getFinshOrder()//获得完成的订单
        
        //是否显示支付按钮
        let ac= localStorage.getItem("active1")
        if(ac=="1")
          this.payisshow=true
        else if(ac=="2")
          this.payisshow=false

      }
  }
</script>